import React, { Component } from "react";
// import { connect } from "react-redux";
import { bindActionCreators } from "../../kredux/index";
import {connect} from '../../kreactRedux/index'

class ReactReduxPage extends Component {
      render() { 
            let { addData, otherAddData, count } = this.props;
            return (
                  <div>
                        <h1>ReduxPage</h1>
                        <p>{count}</p>
                        <button onClick={addData}>add</button>
                        <button onClick={otherAddData}>otherAddData</button>
                  </div>
            );
      }
}

let mapStateToProps = (state) => ({ count: state.count });

// 第一种写法
// let mapDispatchToProps = {addData:() => ({type: "ADD"})};

// 第二种写法
let mapDispatchToProps = (dispatch) => {
      // 第一种写法
      const addData = () => dispatch({ type: "ADD" });

      // 第二种写法
      let creators = {
            otherAddData: () => ({ type: "ADD" }),
      };
      
      creators = bindActionCreators(creators, dispatch);
 
      return { addData, dispatch, ...creators };
};

export default connect(mapStateToProps, mapDispatchToProps)(ReactReduxPage);
